import 'package:flutter/material.dart';
import 'package:get/get_rx/get_rx.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:get/get_utils/src/extensions/context_extensions.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';

class ChooseMonthWidget extends StatefulWidget {
  //3. 定义页面接收arguments传参
  final int width; //宽
  final int height; //高
  final Function(String str)? onPressed; // 点击回调
  const ChooseMonthWidget({
    super.key,
    this.width = 16,
    this.height = 16,
    required this.onPressed,
  });

  @override
  State<ChooseMonthWidget> createState() => _ChooseMonthWidget();
}

class _ChooseMonthWidget extends State<ChooseMonthWidget> {
  @override
  void initState() {
    super.initState();
    // 初始化本地化数据
    initializeDateFormatting('zh');
  }

  DateTime? selectedDate;
  final initialDate = RxInt(DateTime.now().year);
  final month = RxInt(DateTime.now().month);
  final activeMonth = RxInt(DateTime.now().month);
  Iterable<dynamic> monthArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () async {
        await monthPicker(context);
      },
      child: Container(
        width: 83.px,
        height: 30.px,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(364.px),
          color: AppColors.backgroundColorLightGrey,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              '全部',
              style: TextStyle(
                fontSize: 14.px,
                color: AppColors.fontColorBlack,
                fontWeight: FontWeight.w400,
              ),
            ),
            hiSpace(width: 13.px),
            Image.asset(
              'static/images/mall/time_ico.png',
              width: widget.width.px,
              height: widget.height.px,
              fit: BoxFit.cover,
            ),
          ],
        ),
      ),
    );
  }

  Future<void> monthPicker(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          backgroundColor: AppColors.backgroundColor,
          child: Obx(() {
            return Container(
              width: context.width,
              height: 221.px,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(17.px),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                    height: 59.px,
                    width: context.width,
                    padding: EdgeInsets.only(left: 17.px, right: 17.px),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(17.px),
                        topRight: Radius.circular(17.px),
                      ),
                      image: DecorationImage(
                        image: AssetImage('static/images/mall/month_bg.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: Flex(
                      direction: Axis.vertical,
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '${initialDate.value}年${month.value}月',
                          style: TextStyle(
                            fontSize: 14.px,
                            color: AppColors.backgroundColorBlack,
                          ),
                        ),
                        hiSpace(height: 4.px),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              '${initialDate.value}年',
                              style: TextStyle(
                                fontSize: 12.px,
                                color: AppColors.backgroundColorBlack,
                              ),
                            ),
                            Container(
                              width: 40.px,
                              height: 14.px,
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  GestureDetector(
                                    onTap: () {
                                      initialDate.value = initialDate.value - 1;
                                    },
                                    child: Image.asset(
                                      'static/images/mall/time_down.png',
                                      width: 16.px,
                                      height: 16.px,
                                    ),
                                  ),
                                  GestureDetector(
                                    onTap: () {
                                      initialDate.value = initialDate.value + 1;
                                    },
                                    child: Image.asset(
                                      'static/images/mall/time_up.png',
                                      width: 16.px,
                                      height: 16.px,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.fromLTRB(18.px, 13.px, 18.px, 13.px),
                      child: Wrap(
                        direction: Axis.horizontal, // 水平方向
                        spacing: 32, // 子元素之间的间距
                        runSpacing: 12, // 行之间的间距
                        children: [...monthArr.map((item) => _buildItem(item))],
                      ),
                    ),
                  ),
                ],
              ),
            );
          }),
        );
      },
    );
  }

  _buildItem(item) {
    return Obx(() {
      return GestureDetector(
        onTap: () {
          month.value = item;
          activeMonth.value = item;
          widget.onPressed!('$initialDate-${month < 10 ? '0$month' : month}');
          Navigator.of(context).pop();
        },
        child: Container(
          width: 30.px,
          height: 35.px,
          color:
              activeMonth.value == item
                  ? AppColors.fontColorGreen
                  : AppColors.mallbackgroundColorA7.withOpacity(0.37),
          child: Center(
            child: RichText(
              textAlign: TextAlign.center,
              text: TextSpan(
                children: [
                  TextSpan(
                    text: '$item',
                    style: TextStyle(
                      color: AppColors.mallFontColor22,
                      fontSize: 14.px,
                      fontWeight: FontWeight.w400,
                      fontFamily: 'CustomBebas',
                    ),
                  ),
                  TextSpan(text: '\n'),
                  TextSpan(
                    text: '月',
                    style: TextStyle(
                      color: AppColors.mallFontColor22,
                      fontSize: 12.px,
                      fontWeight: FontWeight.w400,
                      fontFamily: 'CustomBebas',
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    });
  }
}
